import React, { Component } from 'react';
import { connect } from 'react-redux';

function mapStateToProps(state) {
    return {
      ...state
    };
}

function mapDispatchToProps(dispatch) {
    return {

    };
}

class Detail extends Component {
    state={
        item:{},  // 当前产品详情
        cate:'' //当前分类
    }
   
    componentWillMount(){
        let {category,list} =this.props;
        console.log('category',category);
        category.forEach((cate)=>{
            console.log('category foreach',cate);
            list[cate].forEach((item)=>{
                console.log('list cate foreach',item);
                if(item.key+''===this.props.match.params.id+''){
                    console.log('匹配成功');
                    this.setState({item:item});
                    this.setState({cate:cate});
                }
            })
        })
        

    }
    render() {
        let {item,cate} =this.state
        return (
            <div>
                <h2>商品详情</h2>
                <p><button onClick={()=>{
                    this.props.history.push('/cate');
                }}>返回</button></p>
                <p>当前分类： {cate}</p>
                <p><img src={item.image} alt="" /></p>
                <p>名称：{item.title}</p>
                <p>价格：{item.price} 元</p>
                <p>库存：{item.stock}</p>
            </div>
        );
    }
}

export default connect(
    mapStateToProps,mapDispatchToProps
)(Detail);